<template>
  <z-transfer
    v-model:target-keys="targetKeys"
    v-model:selected-keys="selectedKeys"
    :data-source="mockData"
  >
  <template #render="item"><div  style="color: red">{{item.title}}-{{item.description}}</div></template>
  </z-transfer>
</template>

<script>
import { defineComponent, ref } from "vue";

const mockData = [];
for (let i = 0; i < 20; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`
  });
}

export default defineComponent({
  setup() {
    const targetKeys = ref([]);

    const selectedKeys = ref([]);

    return {
      mockData,
      targetKeys,
      selectedKeys
    }
  }
})
</script>